<html>
<head>
    <title>game select</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../js/db.js"></script>
    <link type="text/css" rel="Stylesheet" href="../css/game-select.css"/>
    <!--<link type="text/css" rel="Stylesheet" href="../css/game01.css"/>-->
    <!--<link type="text/css" rel="Stylesheet" href="../css/game03.css"/>-->
    <link type="text/css" rel="Stylesheet" href="../css/game04.css"/>
</head>
<body>
<div id="wrap">
    <div id="game-0">
        <div id="logo">
            <img src="../images/image_0014_TNT.png">
        </div>
        <div id="game-content">
            <div class="screen01" style="">
                <div class="title">có 4 loại rối loạn tiêu hóa
                    thường gặp ở trẻ nhỏ</div>
                <div class="image-sicks">
                    <img src="images/trend__0000_n-n-tr-.png">
                </div>
                <div class="image-doctor">
                    <img src="images/image_0005_Layer-3.png">
                </div>
                <div class="title-2">hãy tìm hiểu thêm<br>
                    nguyên nhân của<br>
                    các rối loạn này</div>
                <a href="#">
                    <div class="button-start"></div>
                </a>
            </div>

            <div class="screen02" style="display: none;">
                <a href="#"><div class="button-continue" style="display: none;"></div></a>
            </div>

            <div class="screen04" style="display: none;">
                <div class="image-mother">
                    <img src="images/image_0020_Layer-4.png">
                </div>
                <a href="#">
                    <div class="button-end"></div>
                </a>
            </div>
        </div>

        <script type="text/javascript">
            var stepQuestion = 0;
            var count = 0;
            var buttonStatus = "continue";
            var currentQuestion = game04[stepQuestion];
            $(document).ready(function () {

                $(".button-start", ".screen01").click(function(){
                    $(".screen02").show();
                    $(".screen01").hide();
                    loadQuestion(currentQuestion);
                });

                $(".button-end", ".screen04").click(function () {
                    stepQuestion = 0;
                    count = 0;
                    buttonStatus = "continue";
                    currentQuestion = game04[stepQuestion];
                    loadQuestion(currentQuestion);
                    $(".screen01").show();
                    $(".screen02").hide();
                    $(".screen04").hide();
                });




                $(".button-continue", ".screen02").click(function () {
                    if(buttonStatus == 'continue'){
                        var checkSelect = 0;
                        $(".left div").each(function(index, _item){
                            if($(_item).hasClass("checked")){
                                checkSelect++;
                            }
                            $(_item).removeClass("focus");
                        });
                        if(checkSelect == 2){
                            var countTrueAnswer = 0;
                            $(".right").each(function(index, _item){
                                var item = $(_item);
                                if(currentQuestion.result1 == index + 1 || currentQuestion.result2 == index + 1)
                                {
                                    if(item.height() <= 45)
                                    {
                                        item.addClass("true");
                                    }
                                    else{
                                        item.addClass("true-long");
                                    }
                                }
                            });

                            $(".left div").each(function(index, _item){
                                var item = $(_item);
                                if(item.hasClass("checked"))
                                {
                                    if(currentQuestion.result1 != index + 1 && currentQuestion.result2 != index + 1)
                                    {
                                        item.removeClass("checked");
                                        item.addClass("false");
                                        $(".right").each(function(index1, _item1){
                                            if(index == index1)
                                                $(this).addClass("false-background");
                                        });
                                    }
                                    else
                                    {
                                        countTrueAnswer++;
                                    }
                                }
                            });

                            if(countTrueAnswer == 2){
                                count++;
                            }

                        }
                        else{
                            alert("Hãy chọn 2 đáp án");
                            return;
                        }

                        canCheck(false);

                        buttonStatus = "newQuestion";

                    }
                    else
                    {
                        if(buttonStatus == 'newQuestion')
                        {
                            stepQuestion++;
                            if(stepQuestion < game04.length){
                                currentQuestion = game04[stepQuestion];
                                loadQuestion(currentQuestion);
                                buttonStatus = "continue";
                            }
                            else{
                                loadScreen05(count);
                                $(".screen04").show();
                                $(".screen02").hide();
                            }
                        }
                    }
                });
            });

            function loadQuestion(_currentQuestion)
            {
                $(".wrap-content").remove();
                $(".screen02").append('<div class="wrap-content">' +
                        '<div class="sign">' + _currentQuestion.question + '</div>' +
                        '<div class="list-question">' +
                        '<div class="question-item"><div class="left"><div class="item none-check"></div></div><div class="right">' + _currentQuestion.answer1 + '</div></div>' +
                        '<div class="question-item"><div class="left"><div class="item none-check"></div></div><div class="right">' + _currentQuestion.answer2 + '</div></div>' +
                        '<div class="question-item"><div class="left"><div class="item none-check"></div></div><div class="right">' + _currentQuestion.answer3 + '</div></div>' +
                        '<div class="question-item"><div class="left"><div class="item none-check"></div></div><div class="right">' + _currentQuestion.answer4 + '</div></div>' +
                        '<div class="question-item"><div class="left"><div class="item none-check"></div></div><div class="right">' + _currentQuestion.answer5 + '</div></div>' +
                        '</div>' +
                        '</div>')
                canCheck(true);
                $(".left div").each(function(index, _item){
                    $(_item).addClass("focus");
                });
                $(".button-continue", ".screen02").css('display', 'none');
            }

            function loadScreen05(_count)
            {
                $(".title-3", ".screen04"). remove();
                if(_count == game04.length)
                {
                    $(".screen04").append('<div class="title-3">chúc mừng,<br>' +
                            'bạn đã đạt ' + _count + ' trên ' + game04.length +'</div>'
                    );
                }
                else
                {
                    $(".screen04").append('<div class="title-3">Rất tiếc,<br>' +
                            'bạn chỉ đạt ' + _count + ' trên ' + game04.length +'</div>'
                    );
                }

            }

            function canCheck(_value)
            {
                if(_value){
                    $(".left div").click(function () {
                        if ($(this).hasClass("none-check")) {
                            $(this).removeClass("none-check");
                            $(this).addClass("checked");
                        }
                        else {
                            $(this).removeClass("checked");
                            $(this).addClass("none-check");
                        }
                        $(".button-continue", ".screen02").css('display', 'block');
                    });
                }
                else{
                    $(".left div").click(function () {
                        if ($(this).hasClass("none-check")) {
                            $(this).removeClass("none-check");
                            $(this).addClass("checked");
                        }
                        else {
                            $(this).removeClass("checked");
                            $(this).addClass("none-check");
                        }
                        $(".button-continue", ".screen02").css('display', 'block');
                    });
                }
            }

            function enableControl(control, bool)
            {
                if(bool){
                    $(control).css('display', 'block');
                }
                else
                {
                    $(control).css('display', 'none');
                }
            }
        </script>

        <div id="footer-banner">
            <a href="../index.html"><img class="home-icon" src="../images/home_button.png"></a>
            <a href="#"><img class="abbott-icon" src="../images/image_0001_Abbott-logo.png"></a>
            <img src="../images/image_0002_Shape-8.png">
        </div>
    </div>
</div>
</body>
</html>